<template>
    <div class="app-container">
        <div class="container">
            <el-row>
                <el-form :inline="true" :model="listQuery">
                    <el-form-item label="交易对" style="width: 200px;">
                        <el-select v-model="listQuery.token" placeholder="交易对" clearable>
                            <el-option v-for="item in tokenArr" :label="item" :key="item"
                                :value="item" />
                        </el-select>
                        <!-- <el-input v-model="listQuery.token" placeholder="交易对" clearable /> -->
                    </el-form-item>
                     <el-form-item label="周期" style="width: 200px;">
                        <el-select v-model="listQuery.period" placeholder="周期" clearable>
                            <el-option v-for="item in Object.keys(periodDesc)" :label="periodDesc[item]" :key="item"
                                :value="item" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="策略" style="width: 200px;">
                        <el-select v-model="listQuery.strategyId" placeholder="策略" clearable>
                            <el-option v-for="item in strategyArr" :label="item" :key="item"
                                :value="item" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSearch">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <el-table :data="list" v-loading="listLoading" element-loading-text="拼命加载中" border fit
                    highlight-current-row>
                    <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                    <el-table-column prop="id" label="id" align="center"></el-table-column>
                    <el-table-column prop="token" label="交易对" align="center"></el-table-column>
                    <el-table-column prop="period" label="周期" align="center">
                        <template #default="scope">
                            <el-tag>{{ periodDesc[scope.row.period] }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isSale" label="方向" align="center">
                        <template #default="scope">
                            <el-tag>{{ saleDesc[scope.row.isSale] }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="buyPrice" label="买入价格" align="center"></el-table-column>
                    <el-table-column prop="gainPrice" label="止盈价格" align="center"></el-table-column>
                    <el-table-column prop="lossPrice" label="止损价格" align="center"></el-table-column>
                    <el-table-column prop="method" label="计算方法" align="center">
                        <template #default="scope">
                            <span>{{ scope.row.method }}</span>
                            <el-tag v-if="pingcangDesc[scope.row.pingcang] && scope.row.method==='PINGCANG'">{{ pingcangDesc[scope.row.pingcang] }}</el-tag>
                        </template>
                    </el-table-column>

                    <!-- <el-table-column  label="PINGCANG" align="center">
                        <template #default="scope">
                            <el-tag v-if="pingcangDesc[scope.row.pingcang] && scope.row.method==='PINGCANG'">{{ pingcangDesc[scope.row.pingcang] }}</el-tag>
                        </template>
                    </el-table-column> -->
                    <el-table-column prop="status" label="状态" align="center">
                        <template #default="scope">
                            <el-tag>{{ statusDesc[scope.row.status] }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tokenAlertId" label="tokenAlertId" align="center"></el-table-column>
                    <el-table-column prop="createTime" label="创建日期" width="200" align="center"></el-table-column>
                    <!-- <el-table-column prop="updateTime" label="更新日期" width="200" align="center"></el-table-column> -->
                </el-table>
                <!-- 分页 -->
                <div class="pagination">
                    <el-pagination layout="sizes, total, prev, pager, next" :page-sizes="[10, 20, 30]"
                        v-model:page-size="listQuery.rows" v-model:currentPage="listQuery.page" @current-change="(val) => {
                                fetchData();
                            }
                            " @size-change="(val) => {
            fetchData();
        }
        " :total="totalRecord"></el-pagination>
                </div>
            </el-row>
        </div>
    </div>
</template>

<script>
import { query } from '@/api/tokenAlert';
import { utilsMixin } from '@/mixin/utils';
export default {
    name: 'TokenAlert',
    mixins: [utilsMixin],
    data() {
        return {
            strategyArr: [1, 2, 3, 4, 5],
            list: null, // 列表数据
            listLoading: true, // 加载状态
            totalRecord: 0, // 数据总条数
            listQuery: {
                page: 1,
                rows: 10,
                period: '',
                strategyId: '',
            },
            listQueryParam: { page: 1 },
            saleDesc: {
                false: '买入',
                true: '卖出',
            },
            periodDesc: {
                1: '5分钟',
                2: '15分钟',
                3: '30分钟',
                4: '1小时',
                7: '2小时',
                5: '4小时',
                8: '6小时',
                9: '12小时',
                6: '日线',
            },
            tokenArr: ['BTC/USDT', 'ETH/USDT', 'LTC/USDT'],
            statusDesc: {
                create: '创建',
                push: '推送',
            },
            pingcangDesc: {
                1: '止盈',
                2: '止损',
                0: '止损',
            }
        };
    },
    created() {
        this.fetchData();
    },
    methods: {
        fetchData() {
            this.listLoading = true;
            query(this.listQuery)
                .then((response) => {
                    if (response.success && response.data != null) {
                        this.list = response.data.records;
                        this.totalRecord = response.data.total;
                    }
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        // 查询
        onSearch() {
            this.listQuery = Object.assign(this.listQuery, this.listQueryParam); // 合并对象
            this.fetchData();
        },
    },
};
</script>

<style></style>
